<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对可见的卡拉OK效果 - 最简版</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: #000;
        color: #fff;
        padding: 20px;
        text-align: center;
        min-height: 100vh;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .container {
        max-width: 800px;
        width: 100%;
      }
      h1 {
        color: #00ff00;
        font-size: 2rem;
        margin-bottom: 1rem;
      }
      .lyrics {
        font-size: 3rem;
        line-height: 1.5;
        margin: 30px 0;
        min-height: 80px;
        text-align: center;
        font-weight: bold;
        background: #222;
        padding: 20px;
        border-radius: 10px;
      }
      .char {
        display: inline-block;
        position: relative;
        margin: 0 2px;
      }
      .base {
        color: #888;
        position: relative;
      }
      .highlight {
        color: #ff0000;
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        overflow: hidden;
        white-space: nowrap;
      }
      .controls {
        margin: 20px 0;
      }
      button {
        background: #00ff00;
        color: #000;
        border: none;
        padding: 10px 20px;
        font-size: 1.2rem;
        margin: 0 10px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
      }
      .debug {
        background: #222;
        color: #00ff00;
        padding: 15px;
        text-align: left;
        border-radius: 5px;
        margin-top: 20px;
        font-family: monospace;
        font-size: 0.9rem;
        line-height: 1.5;
        width: 100%;
        max-width: 600px;
        min-height: 100px;
      }
      .error {
        color: #ff0000;
        font-weight: bold;
      }
      .success {
        color: #00ff00;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>绝对可见的卡拉OK效果 - 最简版</h1>
      <p style="color: #00ff00; margin-bottom: 20px">这个版本100%保证效果可见，没有任何花哨效果</p>

      <div class="lyrics" id="lyrics">
        <!-- 歌词将在这里生成 -->
      </div>

      <div class="controls">
        <button id="startBtn">开始演示</button>
        <button id="resetBtn">重置</button>
      </div>

      <div class="debug" id="debug">系统状态: 初始化中...</div>
    </div>

    <script>
      // 简化版调试函数
      function log(message, type = "info") {
        const debug = document.getElementById("debug");
        const timestamp = new Date().toLocaleTimeString();

        let colorClass = "";
        if (type === "error") colorClass = "error";
        if (type === "success") colorClass = "success";

        const entry = document.createElement("div");
        entry.innerHTML = `[${timestamp}] <span class="${colorClass}">${message}</span>`;
        debug.appendChild(entry);
        debug.scrollTop = debug.scrollHeight;
      }

      try {
        log("脚本开始执行", "success");

        // 获取DOM元素
        const lyricsEl = document.getElementById("lyrics");
        const startBtn = document.getElementById("startBtn");
        const resetBtn = document.getElementById("resetBtn");

        if (!lyricsEl || !startBtn || !resetBtn) {
          throw new Error("无法找到必要的DOM元素");
        }

        log("成功获取所有DOM元素", "success");

        // 歌词内容（简单明了，无空格问题）
        const lyricsText = "逐 字 高 亮 效 果 测 试";
        log(`歌词内容: "${lyricsText}"`, "success");

        // 每个字符显示时间（秒）
        const charDuration = 0.8;
        log(`每个字符显示时间: ${charDuration}秒`, "success");

        // 生成歌词HTML
        function generateLyricsHTML() {
          log("开始生成歌词HTML...", "success");
          let html = "";

          for (let i = 0; i < lyricsText.length; i++) {
            const char = lyricsText[i];
            html += `
                        <span class="char" data-index="${i}">
                            <span class="base">${char}</span>
                            <span class="highlight" data-index="${i}">${char}</span>
                        </span>
                    `;
          }

          log("歌词HTML生成完成", "success");
          return html;
        }

        // 渲染歌词
        lyricsEl.innerHTML = generateLyricsHTML();
        log("歌词已渲染到页面", "success");

        // 获取所有高亮元素
        const highlightEls = document.querySelectorAll(".highlight");
        log(`找到 ${highlightEls.length} 个字符元素`, "success");

        // 检查高亮元素是否可见
        if (highlightEls.length === 0) {
          throw new Error("没有找到任何高亮元素，请检查歌词生成逻辑");
        }

        // 检查第一个高亮元素的样式
        const firstHighlight = highlightEls[0];
        if (!window.getComputedStyle(firstHighlight).position) {
          log("警告: 高亮元素可能没有正确应用样式", "error");
        }

        // 演示控制
        let animationId = null;
        let currentProgress = 0;
        let isPlaying = false;
        const totalDuration = lyricsText.length * charDuration;

        log(`总演示时长: ${totalDuration}秒`, "success");

        // 更新歌词高亮
        function updateHighlight(progress) {
          currentProgress = progress;

          for (let i = 0; i < highlightEls.length; i++) {
            const startTime = i * charDuration;
            const endTime = (i + 1) * charDuration;

            if (progress >= startTime && progress < endTime) {
              const charProgress = (progress - startTime) / charDuration;
              highlightEls[i].style.width = `${charProgress * 100}%`;
            } else if (progress >= endTime) {
              highlightEls[i].style.width = "100%";
            } else {
              highlightEls[i].style.width = "0%";
            }
          }

          log(
            `更新进度: ${progress.toFixed(2)}秒 | 当前字符: ${Math.floor(progress / charDuration) + 1}/${lyricsText.length}`,
            "success"
          );
        }

        // 开始演示
        function startDemo() {
          if (isPlaying) return;

          log("开始演示...", "success");
          isPlaying = true;
          currentProgress = 0;

          // 重置所有高亮
          highlightEls.forEach((el) => {
            el.style.width = "0%";
          });

          const startTime = performance.now();

          function animate(time) {
            if (!isPlaying) return;

            const elapsed = (time - startTime) / 1000; // 转换为秒
            const progress = Math.min(elapsed, totalDuration);

            updateHighlight(progress);

            if (progress < totalDuration) {
              animationId = requestAnimationFrame(animate);
            } else {
              log("演示完成", "success");
              isPlaying = false;
            }
          }

          animationId = requestAnimationFrame(animate);
        }

        // 重置演示
        function resetDemo() {
          log("重置演示", "success");
          if (animationId) {
            cancelAnimationFrame(animationId);
          }
          isPlaying = false;

          // 重置所有高亮
          highlightEls.forEach((el) => {
            el.style.width = "0%";
          });

          currentProgress = 0;
          log("重置完成", "success");
        }

        // 事件绑定
        startBtn.addEventListener("click", () => {
          log("用户点击: 开始演示", "success");
          startDemo();
        });

        resetBtn.addEventListener("click", () => {
          log("用户点击: 重置", "success");
          resetDemo();
        });

        // 自动开始（1秒后）
        setTimeout(() => {
          log("系统自动开始演示（1秒后）", "success");
          startDemo();
        }, 1000);

        // 如果2秒后还没开始，强制开始
        setTimeout(() => {
          if (!isPlaying) {
            log("系统强制开始演示（2秒后）", "success");
            startDemo();
          }
        }, 2000);

        log("初始化完成，等待开始...", "success");
      } catch (error) {
        log(`致命错误: ${error.message}`, "error");
        log(`错误详情: ${error.stack}`, "error");
        alert(`卡拉OK演示无法启动:\n${error.message}\n\n请截图此错误信息并联系技术支持`);
      }
    </script>
  </body>
</html>
